﻿@using DukeNUS.FacilitiesPlanning.FPSystem

@{
    var currentUser = (ApplicationUser)Session[ApplicationSessionKeys.CurrentUser];
}

<div class="modal fade" id="user-profile-modal" tabindex="-1" role="dialog" aria-labelledby="user-profile-dialog-title" aria-hidden="true">
  
    <div class="modal-dialog user-profile-dialog">
    
        <div class="modal-content">
      
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="user-profile-dialog-title">@string.Format("User Profile [ User ID : {0}]", currentUser.User.UserID)</h4>
            </div>
      
            <div class="modal-body">
                <div class="user-id-field hidden">@currentUser.User.UserID</div>

                <div class="form-group" data-bind="css: { 'has-error': $root.userProfile.UserName.hasError }">
                    <label class="control-label" for="inputUsername">Username</label>
                    <input type="text" class="form-control" id="inputUsername" value="@currentUser.User.UserName" data-bind="value: $root.userProfile.UserName">
                    
                    <!-- ko if: $root.userProfile.UserName.hasError -->
                    <span class="hidden text-danger" data-bind="css: { hidden: $root.userProfile.UserName.valid }, text: $root.userProfile.UserName.errorMessage"></span>
                    <!-- /ko -->
                </div>

                <div class="form-group" data-bind="css: { 'has-error': $root.userProfile.FullName.hasError }">
                    <label class="control-label" for="inputFullName">Full Name</label>
                    <input type="text" class="form-control" id="inputFullName" value="@currentUser.User.FullName" data-bind="value: $root.userProfile.FullName">
                    
                    <!-- ko if: $root.userProfile.FullName.hasError -->
                    <span class="hidden text-danger" data-bind="css: { hidden: $root.userProfile.FullName.valid }, text: $root.userProfile.FullName.errorMessage"></span>
                    <!-- /ko -->
                </div>

                <div class="form-group" data-bind="css: { 'has-error': $root.userProfile.Designation.hasError }">
                    <label class="control-label" for="inputDesignation">Designation</label>
                    <input type="text" class="form-control" id="inputDesignation" value="@currentUser.User.Designation" data-bind="value: $root.userProfile.Designation">
                    
                    <!-- ko if: $root.userProfile.Designation.hasError -->
                    <span class="hidden text-danger" data-bind="css: { hidden: $root.userProfile.Designation.valid }, text: $root.userProfile.Designation.errorMessage"></span>
                    <!-- /ko -->
                </div>

                <div class="form-group" data-bind="css: { 'has-error': $root.userProfile.Department.hasError }">
                    <label class="control-label" for="inputDepartment">Department</label>
                    <input type="text" class="form-control" id="inputDepartment" value="@currentUser.User.Department" data-bind="value: $root.userProfile.Department">
                    
                    <!-- ko if: $root.userProfile.Department.hasError -->
                    <span class="hidden text-danger" data-bind="css: { hidden: $root.userProfile.Department.valid }, text: $root.userProfile.Department.errorMessage"></span>
                    <!-- /ko -->
                </div>

                <div class="form-group" data-bind="css: { 'has-error': $root.userProfile.Email.hasError }">
                    <label class="control-label" for="inputEmail">Email Address</label>
                    <input type="email" class="form-control" id="inputEmail" value="@currentUser.User.Email" data-bind="value: $root.userProfile.Email">
                    
                    <!-- ko if: $root.userProfile.Email.hasError -->
                    <span class="hidden text-danger" data-bind="css: { hidden: $root.userProfile.Email.valid }, text: $root.userProfile.Email.errorMessage"></span>
                    <!-- /ko -->
                </div>

            </div>
      
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" data-bind="click: $root.userProfile.Update">Save changes</button>
            </div>
    
        </div>
  
    </div>

</div>